<template>
  <div class="todo-app">
    <a href="https://gitee.com/duan_jinyou/vue.git">gitee仓库</a>
    <h1>Todo List</h1>
    <TodoInput @add-todo="addTodo" />
    <TodoFilters v-model="filter" />
    <ul class="todo-list">
      <TodoItem
        v-for="todo in filteredTodos"
        :key="todo.id"
        :todo="todo"
        @update:completed="updateTodo"
        @delete="removeTodo"
      />
    </ul>
    <TodoStats 
      :todos="todos" 
      @clear-completed="clearCompleted"
    />
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import TodoInput from './TodoInput.vue';
import TodoFilters from './TodoFilters.vue';
import TodoItem from './TodoItem.vue';
import TodoStats from './TodoStats.vue';

const newTodo = ref('');
const todos = ref([]);
const filter = ref('all');

// 从本地存储加载todos
onMounted(() => {
  const savedTodos = localStorage.getItem('todos');
  if (savedTodos) {
    todos.value = JSON.parse(savedTodos);
  }
});

// 添加新任务
const addTodo = (text) => {
  todos.value.push({
    id: Date.now(),
    text,
    completed: false
  });
  saveTodos();
};

// 删除任务
const removeTodo = (id) => {
  todos.value = todos.value.filter(todo => todo.id !== id);
  saveTodos();
};

// 更新任务状态
const updateTodo = (updatedTodo) => {
  const index = todos.value.findIndex(todo => todo.id === updatedTodo.id);
  if (index !== -1) {
    todos.value[index] = updatedTodo;
  }
  saveTodos();
};

// 清除已完成任务
const clearCompleted = () => {
  todos.value = todos.value.filter(todo => !todo.completed);
  saveTodos();
};

// 保存到本地存储
const saveTodos = () => {
  localStorage.setItem('todos', JSON.stringify(todos.value));
};

// 计算属性
const remaining = computed(() => {
  return todos.value.filter(todo => !todo.completed).length;
});

const filteredTodos = computed(() => {
  switch (filter.value) {
    case 'active':
      return todos.value.filter(todo => !todo.completed);
    case 'completed':
      return todos.value.filter(todo => todo.completed);
    default:
      return todos.value;
  }
});
</script>

<style scoped>
.todo-app {
  max-width: 500px;
  margin: 0 auto;
  padding: 20px;
  font-family: Arial, sans-serif;
}

h1 {
  text-align: center;
  color: #333;
}
</style>